import React, {useEffect, useState} from 'react'
import {Form, Radio, Button} from 'antd'
import {connect, history} from 'umi'
import {getFleetDetail} from '@/service/customer/fleet'
import {getDict} from '@/service/common/dict'
import VehicleInfo from '../components/VehicleInfo'
import FleetInfo from '../components/FleetInof'
import ManagerInfo from '../components/ManagerInfo'
import FleetDriverList from '../components/FleetDriverList'
import {PageType} from '../constant'
import styles from './index.less'
import {translateDataToTree} from '@/utils/common'
import {getCompany} from '@/service/common'
import OperationRecord from '../components/OperationRecord'

const detail = (props: any) => {
	const routerQuery = props.location.query
	const pageType = routerQuery.type
	const [tabValue, setTabValue] = useState('1')
	const [fleetInfoForm] = Form.useForm()
	const [dict, setDict] = useState<any>({
		yes_no: [],
		Car_Company_Type: [],
	})
	const [detailRecrod, setDetailRecord] = useState<any>({})
	const [companyData, setCompanyData] = useState<any[]>([])
	const isNeedAdmin = Form.useWatch('isNeedAdmin', fleetInfoForm)

	const getDetail = async () => {
		const data = await getFleetDetail({id: routerQuery.id})
		if (data.code === 0) {
			setDetailRecord(data.data)
		}
	}

	/** 获取所属公司数据 */
	const onCompany = () => {
		getCompany({merchantId: props?.user?.orgId}).then((res: any) => {
			if (res?.success) {
				const list = translateDataToTree(res.data)
				setCompanyData(list as any)
			}
		})
	}

	useEffect(() => {
		getDict(
			{
				dictKeys: ['yes_no', 'Car_Company_Type'],
			},
			(res: any) => {
				setDict(res)
			},
		)
		if (pageType !== PageType.Add) {
			getDetail()
			onCompany()
		}
	}, [])

	return (
		<div className={styles.fleetDetail}>
			<Radio.Group
				value={tabValue}
				onChange={(e) => {
					setTabValue(e.target.value)
				}}>
				<Radio.Button value="1">车队信息</Radio.Button>
				<Radio.Button value="2">车队司机信息</Radio.Button>
				<Radio.Button value="3">操作记录</Radio.Button>
			</Radio.Group>
			{tabValue === '1' && (
				<>
					<FleetInfo
						detailRecrod={detailRecrod}
						dict={dict}
						fleetInfoForm={fleetInfoForm}
						pageType={pageType}
						companyData={companyData}
					/>
					<VehicleInfo pageType={pageType} fleetId={routerQuery.id} />
					{isNeedAdmin === '0' && (
						<ManagerInfo
							pageType={pageType}
							fleetId={routerQuery.id}
						/>
					)}
				</>
			)}
			{tabValue === '2' && (
				<>
					<FleetDriverList fleetId={routerQuery.id} />
				</>
			)}
			{tabValue === '3' && <OperationRecord driverId={routerQuery.id} />}
			<div className={styles.operation}>
				<Button
					style={{marginLeft: '5px;'}}
					onClick={() => {
						history.go(-1)
					}}>
					取消
				</Button>
			</div>
		</div>
	)
}

export default connect(({user}: any) => ({user}))(detail)
